<script setup lang="ts">
import { AIToken, Token } from "@/utils/cache";
import { ref, watch, computed } from "vue";
import useTouch from "./useTouch";
import AniAudio from "./widget/ani-audio.vue";
import Send from "./widget/send.vue";
import SpeechIcon from "./widget/speech.vue";
import Keyboard from "./widget/keyboard.vue";

// emit
const emit = defineEmits(["sendMessage"]);
const { time, popupText, audioPanel, start, end, cancel } = useTouch(
  (message: string) => {
    emit("sendMessage", message);
  }
);

const props = defineProps(["message", "className", "theme"]);
const formatTime = computed(() => {
  const m = Math.floor(time.value.count / 60);
  const s = time.value.count % 60;
  return `${m < 10 ? "0" : ""}${m}:${s < 10 ? "0" : ""}${s}`;
});
const formatText = computed(() => {
  return popupText.value || "你说，我听...";
});

const data = ref({
  message: "",
  type: true
});

const switchChat = () => {
  data.value.type = !data.value.type;
};

const cursorSpacing = computed(() => {
  const res = uni.getSystemInfoSync();

  return res.platform === "ios" ? 60 : 20;
});

// watch
watch(
  () => props.message,
  value => {
    data.value.message = value;
    data.value.type = true;
  }
);

const onSend = () => {
  if (!Token.get() || !AIToken.get()) {
    uni.showModal({
      title: "温馨提示",
      content: "您未登录",
      confirmText: "前往登录",
      success(res) {
        if (res.confirm) {
          uni.redirectTo({
            url: "/pages/login/login"
          });
        }
      }
    });
    return;
  }
  if (!data.value.message) {
    uni.showToast({
      icon: "none",
      title: "请输入问题"
    });
    return;
  }
  emit("sendMessage", data.value.message);
  data.value.message = "";
};

const themeOption = computed(() => {
  if (props.theme === "black") {
    return {
      placeholderColor: "#999999",
      speechBgColor: "#666666",
      speechColor: "#FFFFFF",
      bgColor: "#666666",
      color: "#fff",
      showBorder: false,
      iconTheme: "white"
    };
  }
  return {
    placeholderColor: "#999999",
    speechBgColor: "#F3F3F3",
    speechColor: "#333333",
    bgColor: "transparent",
    color: "#333333",
    showBorder: true,
    iconTheme: "black"
  };
});
</script>

<template>
  <view :class="['footer-container', className, theme]">
    <Transition name="fade">
      <Flex class="send" justify="space-between">
        <SpeechIcon
          :theme="themeOption.iconTheme"
          @click="switchChat"
          v-if="data.type"
        />
        <Keyboard :theme="themeOption.iconTheme" @click="switchChat" v-else />
        <Flex
          v-show="data.type"
          :style="{
            flex: 1,
            'border-radius': '44rpx',
            border: themeOption.showBorder ? '1px solid #333' : 'none',
            background: themeOption.bgColor,
            padding: '9px 15px',
            'box-sizing': 'border-box',
            'margin-left': '40rpx'
          }"
        >
          <uv-textarea
            class="textarea"
            autoHeight
            v-model="data.message"
            :cursorSpacing="cursorSpacing"
            :maxlength="-1"
            :textStyle="{ color: themeOption.color }"
            :placeholderStyle="{
              color: themeOption.placeholderColor,
              fontSize: '14px'
            }"
            :customStyle="{
              border: 'none',
              padding: 0,
              'max-height': '50px',
              width: '100%',
              background: 'transparent'
            }"
            placeholder="有问题就来问我哦～"
            @confirm="onSend"
          ></uv-textarea>
          <Send
            :theme="theme"
            :disable="!data.message"
            class="btn-send"
            @click="onSend"
          />
        </Flex>
        <t-button
          v-show="!data.type"
          width="100%"
          height="51px"
          style="margin-left: 40rpx; flex: 1"
          :backgroundColor="themeOption.speechBgColor"
          :labelColor="themeOption.speechColor"
          @touchstart="start"
          @touchcancel="cancel"
          @touchend.stop="end"
        >
          按住说话
        </t-button>
      </Flex>
    </Transition>
    <uv-popup ref="audioPanel" zIndex="9999" :zoom="false" bgColor="none">
      <view :class="['panel-container', theme]">
        <view class="panel">
          <Flex class="tip" justify="space-between">
            <!-- <view class="cancel" @click="cancel">取消</view> -->
            <view class="label">{{
              popupText ? "松开发送" : "正在识别..."
            }}</view>
            <!-- <view class="send" @click="end">发送</view> -->
          </Flex>
          <view class="text">{{ formatText }}</view>
          <view class="time">{{ formatTime }}</view>
          <AniAudio :theme="theme" />
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<style lang="scss" scoped>
.footer-container {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  background-color: var(--bg-chat-input);
  padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
  &.not-safe {
    padding-bottom: 16px;
  }
}
.footer-container.black {
  background-color: rgba(51, 51, 51, 0.9);
  .input {
    background-color: #666666;
    border: none;
    .textarea {
      background-color: transparent;
    }
  }
}
.btn-send {
  margin-left: 20rpx;
}
.input {
  .textarea {
    max-height: 50px;
    width: 100%;
    border: none;
    padding: 0;
    background-color: rgba($color: #ffffff, $alpha: 1);
    :deep(.uv-textarea__field),
    :deep(.uni-textarea-wrapper) {
      max-height: 50px;
    }
  }
}

.panel-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  left: 0;
  z-index: 999;

  .panel {
    width: 100%;
    height: 400rpx;
    background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/Mask group.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 64px;
    text-align: center;
    position: absolute;
    bottom: 0;
    pointer-events: none;
    .tip {
      font-size: 12px;
      color: var(--color-text-default);
      position: absolute;
      width: 100%;
      top: 15px;
      left: 0;
      box-sizing: border-box;
      padding: 0 10px;
      .label {
        flex-grow: 1;
      }
      .cancel,
      .send {
        font-size: 14px;
        flex-shrink: 0;
      }
    }
    .time {
      margin: 18px auto;
      color: #a0a3b5;
      font-size: 14px;
    }
    .text {
      color: var(--color-text-default);
      font-size: 18px;
      box-sizing: border-box;
      padding: 0 10px;
      max-height: 30px;
    }
  }

  &.black {
    .panel {
      background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/black_speech-bg.png");
      .text,
      .time,
      .tip {
        color: #fff;
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  /* transform: translateY(30px); */
}
.audio {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  height: 21px;
  padding: 9px 15px;
  color: #4059fd;
  font-size: 14px;
  text-align: center;
  user-select: none;
}
.icon {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 0;
}
.zip {
  width: 20px;
  height: 20px;
}
.file {
  width: 19.2px;
  height: 21.6px;
}
</style>
